<template>
  <div class="vip-description">
    <nav-bar>
      <div class="center" slot="center">我的优惠</div>
    </nav-bar>
    <scroll class="scroll">
      <p class="title">
        尊敬的用户，随着会员体系逐渐完善，自2016年10月10日起，饿了么会员权益将做如下优化：
        购卡后31天内，累积享有30单减免配送费服务（每日最多3单，每单最高减免4元）。
        注：已购买的会员服务不受影响，当前会员服务失效前无法购买新卡。
      </p>
      <p class="name">Q1: 特权介绍</p>
      <ul>
        <li>身份标识：饿了么会员服务有效期内，享有专属皇冠标识。</li>
        <li>
          减免配送费：
          饿了么会员卡自绑定账户之日起31天内，在「蜂鸟专送」标识商家下单，享有30次减免配送费特权，每日最多减免3单，每单最高可减4元。
        </li>
        <li>更多特权，敬请期待！</li>
      </ul>
      <p class="name">Q2: 资费介绍</p>
      <p>饿了么会员卡：20元</p>
      <p class="name">Q3: 使用说明</p>
      <p class="invalid">当用户满足以下任一条件，会员服务自动失效：</p>
      <ul class="invalid">
        <li>自绑定之日起超过31天；</li>
        <li>在31天内累计使用减免配送费的蜂鸟订单数量达到30单；</li>
      </ul>
      <p class="name">Q4: 购卡说明</p>
      <p>在线购买：饿了么App>我的>饿了么会员卡</p>
      <p class="name">Q5: 温馨提示</p>
      <ul>
        <li>Q5: 温馨提示</li>
        <li>
          请认准饿了么官方渠道，任何从其他第三方途径获得的会员卡，饿了么不保证其可用性。
        </li>
      </ul>
    </scroll>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import Scroll from "components/common/betterScroll/Scroll";
export default {
  components: {
    NavBar,
    Scroll,
  },
};
</script>
<style lang="less" scoped>
@import url("assets/css/mixin");
.vip-description {
  line-height: 24px;
  background-color: #fff;
  .initial-children();
  .scroll {
    height: calc(100% - 44px);
    overflow: hidden;
  }
  .title {
    margin: 20px 40px;
    font-size: 14px;
    color: #333333;
  }
  .name {
    font-weight: 700;
    color: #333333;
  }
  p,
  ul {
    padding: 0 10px;
    margin-bottom: 10px;
    font-size: 14px;
  }
  .invalid {
    color: #333333;
    li {
      margin: 0 30px;
    }
  }
}
</style>